<template>
  <!-- 商品列表容器 -->
  <div class="container">
    <!-- 商品列表区域 -->
    <div class="goods wrapper">
      <!-- 标题区域 -->
      <div class="title">
        <div class="left">
          <h3>{{ type }}</h3> <!-- 显示当前商品类型标题 -->
        </div>
      </div>
      
      <!-- 商品内容区域 -->
      <div class="bd">
        <ul>
          <!-- 商品列表项 -->
          <li v-for="item in uniqueGoodsList" :key="item.id" @click="handleItemClick(item)">
            <a href="#" @click.prevent> <!-- 阻止默认链接行为 -->
              <!-- 商品图片 -->
              <div class="pic">
                <img :src="item.imgSrc" alt="商品图片" class="goodsimg"/>
              </div>
              <!-- 商品信息 -->
              <div class="txt">
                <p> 
                  <!-- 显示折扣价和原价 -->
                  <span style="font-weight: bold;">
                    ¥{{ item.DiscountPrice || item.price }} <!-- 优先显示折扣价 -->
                  </span>
                  <span style="text-decoration: line-through; margin-right: 5px;color: #999;line-height: 14px;margin-left: 4px;font-size: 14px;">
                    ¥{{ item.price }} <!-- 原价 -->
                  </span>
                </p>
                <h3>60天低价</h3> <!-- 促销标签 -->
                <h4>{{ item.name }}</h4> <!-- 商品名称 -->
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
    
    <!-- 查看更多链接 -->
    <div class="right">
      <a class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'

const router = useRouter()
const goodsList = ref([]) // 存储商品列表数据
const props = defineProps({
  type: String // 接收父组件传递的商品类型
})

/**
 * 计算属性：获取去重后的商品列表（基于商品ID）
 * 确保每个商品ID只显示一次
 */
const uniqueGoodsList = computed(() => {
  const uniqueIds = new Set()
  return goodsList.value.filter(item => {
    if (!uniqueIds.has(item.id)) {
      uniqueIds.add(item.id)
      return true
    }
    return false
  })
})

/**
 * 获取推荐商品（随机选择6个商品）
 */
const fetchRecommendedGoods = async () => {
  try {
    // 获取所有商品数据
    const goodsResponse = await axios.get('http://127.0.0.1:3000/api/goods/getAllGoods')
    const allGoods = goodsResponse.data.data

    // 提取所有商品ID并去重
    const goodsIds = new Set()
    allGoods.forEach(good => {
      if (good.id) {
        goodsIds.add(good.id)
      }
    })

    // 将Set转换为数组以便随机选择
    const goodsIdsArray = Array.from(goodsIds)

    // 随机选择6个商品ID（不超过实际数量）
    const randomGoodsIds = []
    for (let i = 0; i < Math.min(6, goodsIdsArray.length); i++) {
      const randomIndex = Math.floor(Math.random() * goodsIdsArray.length)
      randomGoodsIds.push(goodsIdsArray[randomIndex])
      // 移除已选择的ID以避免重复
      goodsIdsArray.splice(randomIndex, 1)
    }

    // 筛选出推荐的商品
    const recommendedGoods = []
    randomGoodsIds.forEach(id => {
      const good = allGoods.find(item => item.id === id)
      if (good) {
        recommendedGoods.push(good)
      }
    })

    goodsList.value = recommendedGoods // 更新商品列表
  } catch (error) {
    console.error('获取推荐商品时出错', error)
  }
}

/**
 * 监听props.type变化，获取对应类型的商品
 */
watch(() => props.type, async (newType) => {
  try {
    goodsList.value = [] // 清空当前商品列表
    
    if (newType === '小编推荐') {
      // 如果是推荐类型，获取推荐商品
      await fetchRecommendedGoods()
    } else {
      // 否则获取指定类型的商品
      const response = await axios.get('http://127.0.0.1:3000/api/goods/getAllGoods')
      const filteredGoods = response.data.data.filter(item => item.category === newType)
      goodsList.value = filteredGoods
    }
  } catch (error) {
    console.error('请求商品列表时出错', error)
  }
}, { immediate: true }) // 立即执行一次

/**
 * 处理商品点击事件
 * @param {Object} item - 被点击的商品对象
 */
const handleItemClick = (item) => {
  const userName = sessionStorage.getItem('userName')
  if (!userName) {
    alert('请先登录才能查看商品详情')
    return
  }
  // 跳转到商品详情页
  router.push(`/goodsdetail/goodsintro?goodsid=${item.id}`)
}

// /**
//  * 添加商品到购物车
//  * @param {Object} item - 要添加的商品对象
//  */
// const addToCart = async (item) => {
//   const userName = sessionStorage.getItem('userName')
//   if (!userName) {
//     alert('请登录才能添加到购物车')
//     return
//   }

//   try {
//     // 获取当前购物车数据
//     const cartResponse = await axios.get('http://localhost:3001/cartList')
//     const cartItems = cartResponse.data
    
//     // 查找是否已存在该商品
//     let cartItem = cartItems.find(ci => ci.id === item.id)

//     if (cartItem) {
//       // 如果已存在，数量+1
//       await axios.put(`http://localhost:3001/cartList/${cartItem.id}`, { 
//         id: cartItem.id,
//         img: cartItem.img,
//         name: cartItem.name,
//         price: cartItem.price,
//         num: cartItem.num + 1 
//       })
//       alert('商品数量已更新')
//     } else {
//       // 如果不存在，添加新商品
//       await axios.post('http://localhost:3001/cartList', {
//         id: item.id,
//         img: item.img,
//         name: item.name,
//         price: item.price,
//         num: 1
//       })
//       alert('商品已添加到购物车')
//     }
//   } catch (error) {
//     alert('添加或更新商品到购物车时出错')
//   }
// }
</script>
<style>
/* 保持原有样式不变 */
.goodsimg {
    width: 216px;
    height: 218px;
}
.goods {
    width: 1240px;
}
.title {
    display: flex;
    justify-content: center;
    align-items: center;
}
.goods .bd ul {
    display: flex;
    flex-wrap: wrap;
}
.goods .bd li {
    width: 216px;
    height: 320px;
    background-color: #ffffff;
    display: block;
    border: 1px solid #ddd;
    margin: 10px;
    cursor: pointer; /* 添加手型光标 */
}
.goods .bd li .pic {
    width: 216px;
    height: 218px;
}
.goods .bd li .txt {
    text-align: center;
}
.goods .bd li h3 {
    font-size: 13px;
    color: #999;
    text-align: left;
    margin-left: 5px;
}
.goods .bd li h4 {
    font-size: 12px;
    color: #666;
    line-height: 18px;
    margin-bottom: 8px;
}
.goods .bd li p {
    font-size: 18px;
    color: #000000;
}
.goods .bd li p span {
    font-size: 22px;
    color: #000000;
}
.more {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>